<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>sprae</title>
	<link href="/css/currentStyle.css" rel="stylesheet">
</head>

<body>
	<div id="main">
		<div class="container">
			<div class="jumbotron">
				<div class="row">
					<div class="col-md-6">
						<h1>sprae</h1>
					</div>
					<div class="col-md-6">
						<div class="row">
							<div class="col-sm-6 smallpad">
								<button :onclick="e => run()" type="button" class="btn btn-primary btn-block" id="run">Create 1,000
									rows</button>
							</div>
							<div class="col-sm-6 smallpad">
								<button :onclick="e => runLots()" type="button" class="btn btn-primary btn-block" id="runlots">Create
									10,000
									rows</button>
							</div>
							<div class="col-sm-6 smallpad">
								<button :onclick="e => add()" type="button" class="btn btn-primary btn-block" id="add">Append 1,000
									rows</button>
							</div>
							<div class="col-sm-6 smallpad">
								<button :onclick="e => update()" type="button" class="btn btn-primary btn-block" id="update">Update
									every 10th
									row</button>
							</div>
							<div class="col-sm-6 smallpad">
								<button :onclick="e => clear()" type="button" class="btn btn-primary btn-block"
									id="clear">Clear</button>
							</div>
							<div class="col-sm-6 smallpad">
								<button :onclick="e => swap()" type="button" class="btn btn-primary btn-block" id="swaprows">Swap
									Rows</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<table class="table table-hover table-striped test-data">
				<tr :each="item in rows" :class="selected && item.id == selected.id ? 'danger' : ''">
					<td class="col-md-1" :text="item.id"></td>
					<td class="col-md-4">
						<a role="select" :onclick="e => select(item)" :text="item.label"></a>
					</td>
					<td class="col-md-1">
						<a>
							<span role="delete" :onclick="e => remove(item)" class="glyphicon glyphicon-remove"
								aria-hidden="true"></span>
						</a>
					</td>
					<td class="col-md-6"></td>
				</tr>
			</table>
		</div>
		<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
	</div>
	<script type="module" src="src/main.js"></script>
</body>

</html>
